<template>
  <!-- 基本信息 -->
  <div>
    <el-form ref="form" :model="form" label-width="150px" :inline="true" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="活动名称" prop="activity_name">
            <el-input v-model="form.activity_name" maxlength="10" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选择日期" width="236">
            <el-date-picker
              :disabled="disabled1"
              v-model="dates"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="form.is_end" :disabled="disabled">
              <el-radio label="0">长期活动</el-radio>
              <el-radio label="1">取消长期活动</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="bg_image_ids" label="背景图片上传">
            <div class="flex_center">
              <div class="mr_10">
                <newUpload
                  ref="uploadImg1"
                  :fileNum="1"
                  :file-list="fileList1"
                  :width="750"
                  :height="2284"
                ></newUpload>
              </div>
              <div class="mr_10">
                <newUpload
                  ref="uploadImg2"
                  :fileNum="1"
                  :file-list="fileList2"
                  :width="437"
                  :height="30"
                ></newUpload>
              </div>
              <div class="mr_10">
                <newUpload
                  ref="uploadImg3"
                  :fileNum="1"
                  :file-list="fileList3"
                  :width="286"
                  :height="35"
                ></newUpload>
              </div>
              <newUpload
                ref="uploadImg4"
                :fileNum="1"
                :file-list="fileList4"
                :width="286"
                :height="36"
              ></newUpload>
            </div>
            <!-- <newUpload ref="uploadImg1" :fileNum="4" :file-list="fileList1" :size-number="2"></newUpload> -->
            <p class="pclass">
              <span class="spanclass">背景长图750*2284</span>
              <span class="spanclass">分享框内标题437*30</span>
              <span class="spanclass">邀请记录标题286*35</span>
              <span class="spanclass">规则说明标题286*36</span>
            </p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="res_image_ids" label="领取结果海报">
            <newUpload1 ref="uploadImg5" :fileNum="1" :file-list="fileList5" :size-number="2"></newUpload1>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="规则编辑" prop="rule_text">
            <Tinymce v-model="form.rule_text" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="安卓、IOS链接" prop="weex_links">
            <el-input v-model="form.weex_links" clearable />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="小程序链接" prop="mini_links">
            <el-input v-model="form.mini_links" clearable />
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="是否开启邀请人分销" prop="is_distribute">
            <el-switch v-model="form.is_distribute" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="金币奖励">
            <el-input v-model="form.distribute_gold_num" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="银币奖励">
            <el-input v-model="form.distribute_silver_num" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="handleSubmit('form')" :disabled="isHide">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { basicInfo } from "@/api/invitationMange";
import newUpload1 from "@/components/imgUpload/shopImgUp";
import newUpload from "@/components/imgUpload/shopImgUp2";
import Tinymce from "@/components/NewTinymce";
export default {
  components: { newUpload, Tinymce, newUpload1 },
  props: ["title", "activeId"],
  data() {
    // 购买须知
    const rules = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入购买须知"));
      } else {
        return callback();
      }
    };
    return {
      form: {
        activity_name: "",
        rule_text: "",
        weex_links: "",
        mini_links: "",
        is_end: "",
        start_time: "",
        end_time: "",
        bg_image_ids: [],
        res_image_ids: [],
        is_distribute: 0,
        distribute_gold_num: 0,
        distribute_silver_num: 0
      }, //基本信息配置
      basicId: "",
      isHide: false,
      disabled: false,
      disabled1: false,
      dates: null,
      fileList1: [], //背景图片
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [], //领取结果海报
      rules: {
        activity_name: [
          {
            required: true,
            message: "请填写活动名称",
            trigger: "blur"
          }
        ],
        bg_image_ids: [
          {
            required: true,
            message: "请选择背景图片"
          }
        ],
        res_image_ids: [
          {
            required: true,
            message: "请选择领取海报图片"
          }
        ],
        weex_links: [
          {
            required: true,
            message: "请填写安卓,IOS链接",
            trigger: "blur"
          }
        ],
        // mini_links: [
        //   {
        //     required: true,
        //     message: "请填写小程序链接",
        //     trigger: "blur"
        //   }
        // ],
        is_distribute: [
          {
            required: true,
            message: "请选择是否开启",
            trigger: "blur"
          }
        ],
        rule_text: [
          {
            required: true,
            validator: rules,
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    dates(val) {
      if (val) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    "form.is_end"(val) {
      console.log("val", val);
      if (val == 0) {
        this.disabled1 = true;
      } else {
        this.disabled1 = false;
      }
    },
    "form.rule_text"(val) {
      if (val) {
        this.$refs.form.clearValidate("rule_text");
      } else {
        this.$refs.form.validateField("rule_text");
      }
    },
    activeId(val) {
      if (val) {
        this.isHide = true;
      } else {
        this.isHide = false;
      }
    }
  },
  created() {},
  methods: {
    // 提交
    handleSubmit(form) {
      let arr, arr1, arr2, arr3;
      arr = this.$refs.uploadImg1.submitUpload()[0];
      arr1 = this.$refs.uploadImg2.submitUpload()[0];
      arr2 = this.$refs.uploadImg3.submitUpload()[0];
      arr3 = this.$refs.uploadImg4.submitUpload()[0];
      this.form.bg_image_ids = [arr, arr1, arr2, arr3];
      this.form.res_image_ids = this.$refs.uploadImg5.submitUpload()[0];
      if (this.dates != null) {
        this.form.start_time = this.dates[0];
        this.form.end_time = this.dates[1];
        this.form.is_end = 1;
      } else {
        this.form.start_time = null;
        this.form.end_time = null;
        this.form.is_end = 0;
      }
      let data = {
        activity_name: this.form.activity_name,
        start_time: this.form.start_time,
        end_time: this.form.end_time,
        is_end: this.form.is_end,
        res_image_ids: JSON.stringify([this.form.res_image_ids]),
        bg_image_ids: JSON.stringify(this.form.bg_image_ids),
        rule_text: this.form.rule_text,
        weex_links: this.form.weex_links,
        mini_links: this.form.mini_links,
        is_distribute: this.form.is_distribute,
        distribute_gold_num: this.form.distribute_gold_num,
        distribute_silver_num: this.form.distribute_silver_num
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          if (!(arr && arr1 && arr2 && arr3)) {
            this.$message({
              showClose: true,
              message: "背景图片须上传4张",
              type: "warning"
            });
            return false;
          }
          basicInfo(data).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.basicId = res.data.data;
              this.$emit("prize", this.title, this.basicId);
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pclass {
  margin-top: -5px;
  margin-bottom: 0;
}
.spanclass {
  display: inline-block;
  width: 146px;
  text-align: center;
  color: #bbb;
  margin-right: 8px;
}
.flex_center {
  display: flex;
  align-items: center;
}
.mr_10 {
  margin-right: 10px;
}
</style>